<template> 
  <el-dialog
     :model-value="visible"
     :title="title"
     width="500"
     :before-close="handleClose"
     :close-on-click-modal="false"
   >
   <el-form :model="form" label-width="auto">
    <el-form-item label="站点编码：">
      <el-select
            v-model="form.sitCode"
            placeholder="请选择"
            @change="handleChange"
            filterable
            clearable
        >
            <el-option
                v-for="item in siteOptions"
                :key="item.sitCode"
                :label="item.sitName"
                :value="item.sitCode"
            />
        </el-select>
    </el-form-item>
    <el-form-item label="成本年月：">
      <el-date-picker
        v-model="form.costMonth"
        type="month"
        placeholder="请选择月份"
        format="YYYY-MM"
        value-format="YYYY-MM"
        style="width:100%"
      />
    </el-form-item>
    <el-form-item label="成本项目">
      <el-select
            v-model="form.costItem"
            placeholder="请选择"
            filterable
            clearable
        >
            <el-option
                v-for="item in itemOptions"
                :key="item.itemCode"
                :label="item.itemName"
                :value="item.itemCode"
            />
        </el-select>
    </el-form-item>
  
    <el-form-item label="成本值">
        <el-input v-model.trim="form.costValue" :maxlength="10" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="审核状态">
        <el-radio-group v-model="form.costFlag">
            <el-radio :value="0">未审核</el-radio>
            <el-radio :value="1">已审核</el-radio>
        </el-radio-group>
    </el-form-item>   
   </el-form>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="handleClose">取消</el-button>
         <el-button type="primary" @click="handleConfirm">
           确定
         </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
<script setup>
import {watch, ref} from 'vue'
import { ElMessage } from 'element-plus'
import { apiSiteList, apiCostItemsSel, apiAddCostRecord } from '@/api/cost'
 
let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  entry: String,
  data: {
    type: Object,
    default: () => {}
  }
})
let emit = defineEmits(['close', 'confirm'])
 
let form = ref({
  sitCode: '',
  costMonth: '',
  costItem: '',
  costValue: '',
  costFlag: 1
})
let title = ref('')
let siteOptions = ref([]) // 站点列表
let itemOptions = ref([]) // 成本项目列表
 
watch(() => props.visible, (newV) => {
 
  if(newV) {
    getList()
    if(props.entry === 'edit') {
      title.value = '成本记录'
      form.value ={
        ...props.data,
        zyFlag: undefined,
        costFlag: Number(props.data.costFlag)
      }
    } else {
      title.value = '新增成本记录'
      form.value = {
        sitCode: '',
        costMonth: '',
        costItem: '',
        costValue: '',
        costFlag: 1
      }
    }
        
  }
})
// 选择站点
const handleChange = (sitCode) => {
  // if(!sitCode) {
  //   form.value.plcCode = ''
  //   return
  // }
}
// 获取站点列表、 成本项目列表
const getList = async() => {
  const res = await apiSiteList()
  siteOptions.value = res
  const ret = await apiCostItemsSel()
  itemOptions.value = ret
}
 
// 取消
const handleClose = () => {
 
  emit('close')
}
// 确定
const handleConfirm = async () => {
 
  const res = await apiAddCostRecord({
    ...form.value
  })
  if(res) {
    ElMessage.success('操作成功')
         
    emit('confirm')
  }
}
</script>
 
 <style lang="scss" scoped>
 
 </style>